<template>
	<view class="columnbox wdh-100 content">
		<!-- <view class="wdh-100 rowbox jus chat-title">咨询列表</view> -->
		<view class="q-title columnbox als">
			<view>咨询列表</view>
			<view class="q-line"></view>
		</view>
		<view @click="showDetail(item.userid,index)" class="wdh-100 rowbox spb info-box"
			v-for="(item,index) in chatList" :key='index'>
			<view class="rowbox">
				<view class="rowbox" style="position: relative;margin-right: 10rpx;">
					<image class="user-img" mode="aspectFill" :src="item.chatroomheadpic"></image>
					<view class="unread_cnt">
						<u-badge bgColor='#f90000' max="99" :value="item.unread_cnt"></u-badge>
					</view>
				</view>
				<view class="columnbox als info-detail">
					<view class="user-name">{{item.name}}</view>
					<view v-if="item.chat_type==1" class="info-content textovflow">{{item.content.content}}</view>
					<view v-else-if="item.chat_type==2" class="info-content textovflow">[图片]</view>
					<view v-else-if="item.chat_type==3" class="info-content textovflow">[语音]</view>
					<view v-else-if="item.chat_type==4||item.chat_type==5" class="info-content textovflow">[开方]</view>
					<view v-else-if="item.chat_type==6" class="info-content textovflow">[商品]</view>
					<view v-else-if="item.chat_type==7" class="info-content textovflow">[问诊已结束]</view>
					<view v-else-if="item.chat_type==11" class="info-content textovflow">[电子病历]</view>
					<view v-else-if="item.chat_type==14" class="info-content textovflow">[开始问诊]</view>
					<view v-else-if="item.chat_type==15" class="info-content textovflow">[撤回消息]</view>
					<view v-else-if="item.chat_type==16" class="info-content textovflow">[已退款，问诊已结束]</view>
					<view v-else-if="item.chat_type==17" class="info-content textovflow">[病情描述]</view>
				</view>
			</view>
			<view class="columnbox status-box">
				<view class="info-date">{{item.updated_at}}</view>
				<view class="rowbox def-bgcol status-btn" v-if="item.chat_type!=7">问诊中</view>
				<view v-else class="rowbox status-btn">问诊已结束</view>
			</view>
		</view>
	</view>
</template>

<script>
	import parse from '../../uni_modules/uview-ui/libs/config/props/parse';
	import getdate from '@/utils/time.js'
	export default {
		data() {
			return {
				pageNo: 1,
				chatList: [],
				total: 0
			};
		},
		onLoad() {
			if (this.isLogin) {
				this.getMessageRecord()
			}
		},
		onShow() {},
		computed: {
			user() {
				return this.$store.state.user;
			},
			isLogin() {
				return this.$store.state.isLogin;
			},
			newChat() {
				return this.$store.state.newChat;
			},
		},
		onPullDownRefresh() {
			this.pageNo = 1
			this.chatList = []
			this.getMessageRecord()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		watch: {
			newChat(newValue, oldValue) {
				console.log('接收到新消息=====', newValue)
				if (this.chatList.length == 0) {
					this.chatList.unshift({
						chat_id: 1,
						chat_type: JSON.parse(newValue.msg).classify,
						chatroomheadpic: JSON.parse(newValue.msg).chatroomheadpic,
						content: JSON.parse(newValue.msg),
						last_id: 0,
						name: JSON.parse(newValue.msg).name,
						unread_cnt: 1,
						updated_at: getdate.toLocalDate(newValue.time / 1000),
						userid: parseInt(newValue.from)
					})
				} else {
					let list = []
					this.chatList.forEach(res => {
						list.push(res.userid)
					})
					let index = list.indexOf(parseInt(newValue.from))
					if (index > -1) {
						this.chatList.splice(index, 1)
						this.chatList.unshift({
							chat_id: 1,
							chat_type: JSON.parse(newValue.msg).classify,
							chatroomheadpic: JSON.parse(newValue.msg).chatroomheadpic,
							content: JSON.parse(newValue.msg),
							last_id: 0,
							name: JSON.parse(newValue.msg).name,
							unread_cnt: newValue.chatdetailflag ? 0 : (this.chatList[index].unread_cnt * 1 + 1),
							updated_at: getdate.toLocalDate(newValue.time / 1000),
							userid: parseInt(newValue.from)
						})
					} else {
						this.chatList.unshift({
							chat_id: 1,
							chat_type: JSON.parse(newValue.msg).classify,
							chatroomheadpic: JSON.parse(newValue.msg).chatroomheadpic,
							content: JSON.parse(newValue.msg),
							last_id: 0,
							name: JSON.parse(newValue.msg).name,
							unread_cnt: 1,
							updated_at: getdate.toLocalDate(newValue.time / 1000),
							userid: parseInt(newValue.from)
						})
					}
				}
			},
			isLogin(newValue, oldValue) {
				console.log('登录变化', newValue)
				if (this.isLogin) {
					this.pageNo = 1
					this.chatList = []
					this.getMessageRecord()
				} else {
					this.pageNo = 1
					this.chatList = []
				}
			}
		},
		methods: {
			showDetail(id, index) {
				this.chatList[index].unread_cnt = 0
				uni.navigateTo({
					url: '/pages/chat/detail?id=' + id
				})
			},
			getMessageRecord() {
				this.$req.post('/user/chatList', {
					memberid: uni.getStorageSync('memberid'),
					pageNo: this.pageNo,
					pageSize: 20,
				}).then(res => {
					res.data.data.forEach(resp => {
						resp.content = JSON.parse(resp.content)
						resp.updated_at = getdate.toLocalDate(resp.updated_at / 1000)
					})
					this.chatList = res.data.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F5F8FB;
		min-height: 100vh;
		justify-content: flex-start;
		font-family: PingFang SC;
	}

	.info-box {
		padding: 32rpx 36rpx;
		background: #fff;

	}

	.chat-title {
		font-size: 32rpx;
		padding: 0 36rpx;
		padding-top: 32rpx;
		background: #fff;
		margin-top: 20rpx;
		color: #232323;
		font-weight: bold;
	}

	.user-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		margin-right: 20rpx;
	}

	.unread_cnt {
		position: absolute;
		top: 0;
		right: 10rpx;
	}

	.info-detail {
		line-height: 40rpx;

		.user-name {
			font-size: 30rpx;
			color: #202020;
		}

		.info-content {
			font-size: 24rpx;
			color: #9B9B9B;
			margin-top: 10rpx;
			width: 300rpx;
		}
	}

	.status-box {
		align-items: flex-end;

		.info-date {
			font-size: 24rpx;
			color: #606062;
		}

		.status-btn {
			font-size: 22rpx;
			color: #fff;
			padding: 4rpx 10rpx;
			margin-top: 14rpx;
			border-radius: 10rpx;
		}
	}

	.q-title {
		width: 100%;
		font-weight: bold;
		font-size: 28rpx;
		color: #202020;
		font-family: PingFang SC;
		line-height: 40rpx;
		padding: 0 36rpx;
		padding-top: 32rpx;
		background: #fff;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.q-title>view:nth-child(1) {
		position: relative;
		z-index: 4;
	}

	.q-line {
		background: linear-gradient(to right, #00b6b2, rgba(#00b6b2, 0));
		width: 70rpx;
		height: 15rpx;
		margin-top: -15rpx;
	}
</style>